<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="formRef" :inline="true" v-show="showSearch">
      <el-form-item label="企业商户名称：" prop="enterpriseName">
        <el-input
          v-model="queryParams.enterpriseName"
          placeholder="请输入"
          clearable
          @keyup.enter="handleQuery"
        />
      </el-form-item>
      <el-form-item label="设备名称：" prop="machineName">
        <el-input
          v-model="queryParams.machineName"
          placeholder="请输入"
          clearable
          @keyup.enter="handleQuery"
        />
      </el-form-item>

      <el-form-item label="联系方式：" prop="contactsMobile">
        <el-input
          maxlength="11"
          v-model="queryParams.contactsMobile"
          placeholder="请输入"
          clearable
          @keyup.enter="handleQuery"
        />
      </el-form-item>
      <el-form-item label="联系姓名：" prop="contacts">
        <el-input
          v-model="queryParams.contacts"
          placeholder="请输入"
          clearable
          @keyup.enter="handleQuery"
        />
      </el-form-item>
      <el-form-item label="审核状态" prop="status">
        <el-select v-model="queryParams.status" placeholder="请选择" clearable>
          <el-option
            v-for="item in auditStatusList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="企业类型" prop="type">
        <ApiSelect
          v-model="queryParams.type"
          :params="{ dictType: 'enterprise_type' }"
          :api="selectState.settlementCycle.api"
          :resultField="'rows'"
          :valueField="'dictValue'"
          :labelField="'dictLabel'"
          clearable
        />
      </el-form-item>
      <el-form-item>
        <el-button @click="resetQuery">重置</el-button>
        <el-button type="primary" @click="handleQuery">查询</el-button>
      </el-form-item>
    </el-form>
    <el-row :gutter="10" class="mb8" justify="end">
      <el-button v-hasPermi="['system:enterprise:export']" type="primary" @click="handleExport"
        >批量导出筛选数据</el-button
      >
    </el-row>
    <el-row :gutter="10" class="mb8">
      <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table v-loading="loading" :data="list">
      <el-table-column label="企业商户名称" align="center" prop="enterpriseName" />
      <el-table-column label="设备名称" align="center" prop="machineName" />
      <el-table-column label="联系方式" align="center" prop="contactsMobile" />
      <el-table-column label="联系人姓名" align="center" prop="contacts" />
      <el-table-column label="企业地址" align="center" prop="site" />
      <el-table-column label="审核状态" align="center" prop="status" width="160">
        <template #default="{ row }">
          <el-tag v-if="row.status === 1" type="danger">未通过</el-tag>
          <el-tag v-else-if="row.status === 2" type="success">已通过</el-tag>
          <el-tag v-else type="info">待审核</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="企业类型" align="center" prop="type" width="100" />
      <el-table-column label="注册时间" align="center" prop="createTime" width="auto" />
      <el-table-column label="操作" align="center" width="150" fixed="right">
        <template #default="{ row }">
          <el-button
            v-if="row.status === 1 || row.status === 2"
            link
            type="primary"
            v-hasPermi="['system:enterprise:details']"
            @click="openDialog(row, 0)"
          >
            详情
          </el-button>
          <el-button
            v-if="row.status === 0"
            link
            type="primary"
            v-hasPermi="['system:enterprise:audit']"
            @click="openDialog(row, 1)"
          >
            审核
          </el-button>
          <el-button
            v-if="row.status === 2 || row.status === 0"
            link
            type="primary"
            @click="openDialog(row, 2)"
            v-hasPermi="['system:enterprise:edit']"
          >
            编辑
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="total > 0"
      :total="total"
      v-model:page="queryParams.pageNum"
      v-model:limit="queryParams.pageSize"
      @pagination="getList"
    />
    <detailsDialog @refreshList="getList" ref="detailsDialogRef" :dialog-title="dialogTitle" />
  </div>
</template>
<script setup>
import { useOrganApiConfig } from '@/hooks/service'
import detailsDialog from './components/detailsDialog.vue'
import { getEnterpriseUserListApi } from '@/api/system/enterpriseUser'

const { proxy } = getCurrentInstance()
const selectState = useOrganApiConfig()
const queryParams = ref({
  pageNum: 1,
  pageSize: 10,
  enterpriseName: '',
  machineName: '',
  contactsMobile: '',
  contacts: '',
  status: '',
  type: ''
})
const total = ref(0)
const formRef = ref()
const list = ref([])
const showSearch = ref(true)
const loading = ref(false)
const dialogTitle = ref('详情')
const detailsDialogRef = ref()
const auditStatusList = [
  { value: 1, label: '未通过' },
  { value: 2, label: '已通过' },
  { value: 0, label: '待审核' }
]
/**获取列表信息 */
function getList() {
  loading.value = true
  getEnterpriseUserListApi(queryParams.value)
    .then((res) => {
      console.log(res)
      total.value = res.data.total
      list.value = res.data.rows.map((item) => {
        return {
          ...item,
          type: item.type === 1 ? '公司用户' : item.type === 2 ? '酒店用户' : ''
        }
      })
    })
    .finally(() => {
      loading.value = false
    })
}
function handleQuery() {
  queryParams.value.pageNum = 1
  getList()
}
/**重置按钮 */
function resetQuery() {
  formRef.value.resetFields()
  getList()
}
/**审核按钮 */
function openDialog(row, type) {
  if (type === 1) {
    dialogTitle.value = '审核详情'
  } else if (type === 2) {
    dialogTitle.value = '编辑'
  } else {
    dialogTitle.value = '详情'
  }
  detailsDialogRef.value.init(row.id)
}
/**导出 */
function handleExport() {
  const param = {
    enterpriseName: queryParams.value.enterpriseName,
    machineName: queryParams.value.machineName,
    contactsMobile: queryParams.value.contactsMobile,
    contacts: queryParams.value.contacts,
    status: queryParams.value.status,
    type: queryParams.value.type ? Number(queryParams.value.type) : queryParams.value.type
  }
  proxy.download(
    '/group/enterpriseUser/derive',
    { ...param },
    `企业用户${new Date().getTime()}.xlsx`
  )
}

getList()
</script>
<style lang="scss" scoped>
.el-input {
  width: 215px;
}
</style>
